<template>
  <div class="scommodity">
    <!-- 商品详情页头部 -->
    <div class="stop">
      <div class="type">
        <span class="iconfont" @click="goto()">&#xe779;</span>
        长源灯饰
        <router-link to="/home/search"
          ><span class="iconfont">&#xe86e;</span></router-link
        >
      </div>
      <div class="nav">
        <span @click="click(0)" :class="index == 0 ? 'active' : ''">综合</span>
        <span @click="click(1)" :class="index == 1 ? 'active' : ''">最新</span>
        <span @click="click(2)" :class="index == 2 ? 'active' : ''"
          >价格<span
            class="iconfont"
            :style="cli == 1 ? 'color:red' : 'color:black'"
            >&#xe6e7;</span
          ><span
            class="iconfont"
            :style="cli == 2 ? 'color:red' : 'color:black'"
            >&#xe6e6;</span
          ></span
        >
        <span @click="click(3)" :class="index == 3 ? 'active' : ''">销量</span>
      </div>
    </div>
    <!-- 商品展示 -->
    <div class="shangpin">
      <!-- 没有该类商品时 -->
      <div v-if="none" class="tishi">
        还没有该商品
      </div>
      <!-- 渲染商品 -->
      <div class="box" v-for="item in mysp" :key="item.id">
        <router-link :to="{ path: '/home/commodity', query: { id: item.id } }">
          <div class="img">
            <img :src="item.img" alt="" />
          </div>
          <p>{{ item.name }}</p>
          <div class="ys">
            <span>￥{{ item.jg }}</span
            ><span>已售{{ item.ys }}件</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.scommodity {
  width: 100%;
  overflow: hidden;
      .tishi{
      color: red;
      width: 100%;
      text-align: center;
      background-color: white;
     padding-top: 50px;
    }
  .stop {
    position: fixed;
    z-index: 9999;
    top: 50px;
    width: 100%;
    background-color: white;
    .type {
      text-align: center;
      line-height: 50px;
      font-size: 16px;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 9999;
      border-bottom: 1px solid #ccc;
      font-weight: bold;
      color: rgb(116, 116, 116);
      text-align: center;
      background-color: white;
      span {
        position: absolute;
        display: block;
        height: 50px;
        width: 40px;
      }
      a {
        display: block;
        span {
          position: absolute;
          display: block;
          height: 50px;
          color: rgb(116, 116, 116);
          font-size: 25px;
          width: 40px;
          right: 0;
          top: 0;
        }
      }
    }
    .nav {
      display: flex;
      width: 100%;
      border-bottom: 1px solid #ccc;
      span {
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        display: block;
        width: 25%;
        position: relative;
        > span {
          top: -3px;
          position: absolute;
          right: 0;
        }
        > span:nth-child(2) {
          top: 5px;
        }
      }
      .active {
        color: red;
      }
    }
  }
  .shangpin {
    background-color: rgb(247, 247, 247);
    margin: 100px 0 60px;
    display: flex;
    flex-wrap: wrap;
    .box {
      width: 48%;
      margin: 1%;
      a {
        display: block;
        background-color: white;
        height: 270px;
        .img {
          width: 100%;
          height: 190px;
          overflow: hidden;
          img {
            width: 100%;
            min-width: 190px;
          }
        }
        p {
          font-size: 15px;
          height: 30px;
          padding: 10px;
          color: rgb(49, 49, 49);
        }
        .ys {
          position: relative;
          height: 25px;
          span:nth-child(1) {
            position: absolute;
            left: 10px;
            font-size: 15px;
            line-height: 25px;
            color: red;
          }
          span:nth-child(2) {
            position: absolute;
            right: 10px;
            font-size: 12px;
            line-height: 25px;
            color: rgb(143, 143, 143);
          }
        }
      }
    }
  }
}
</style>
<script>
import { mapState } from "vuex";
export default {
  name: "scommodity",
  data() {
    return {
      index: 0,
      mysp: [],
      mysp2: [],
      cli: "",
      // 存储商品状态
      none:false
    };
  },
  computed: {
    ...mapState(["sp"]),
  },
  methods: {
    goto() {
      this.$router.go(-1);
    },
    click(i) {
      let _this = this;
      this.index = i;
      if (i == 0) {
        this.mysp = this.mysp2.concat();
        this.cli = "";
      } else if (i == 1) {
        this.cli = "";
        this.mysp.sort(function (a, b) {
          return b.time - a.time;
        });
      } else if (i == 2) {
        this.cli == 1 ? (this.cli = 2) : (this.cli = 1);
        this.mysp.sort(function (a, b) {
          if (_this.cli == 2) {
            return b.jg - a.jg;
          } else {
            return a.jg - b.jg;
          }
        });
      } else if (i == 3) {
        this.cli = "";
        this.mysp.sort(function (a, b) {
          return b.ys - a.ys;
        });
      }
    },
  },
  mounted() {
    let type = this.$route.query.type;
    let name = this.$route.query.name;
    // 获取同类商品
    if (type) {
      for (let i = 0; i < this.sp.length; i++) {
        if (
          this.sp[i].fg == type ||
          this.sp[i].lx == type ||
          this.sp[i].wz == type ||
          this.sp[i].jt == type
        ) {
          this.mysp.push(this.sp[i]);
          this.mysp2.push(this.sp[i]);
        }
      }
    } else if (name) {
       for (let i = 0; i < this.sp.length; i++) {
        if (this.sp[i].name.indexOf(name)!=-1) {
          this.mysp.push(this.sp[i]);
          this.mysp2.push(this.sp[i]);
        }
      }
    }
    if(this.mysp.length==0){
      this.none=true
    }
  },
};
</script>